<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="tiankong">
			<h1>填空题</h1>
			<div id="tiankong_1">
				<h3>1.</h3>
				<code> 
<pre>
	var a = "global";
	(function(){
		console.log(a);
		var a = "local";
		console.log(a);
	})();
</pre>
				 </code>
				 <p>
					<em style="color: red;">声明提前，注意考点是作用域</em><br>
					以上代码依次输出的是: "undefined", "loacal"。
				 </p>
			</div>
			<div id="tiankong_2">
				<h3>2.</h3>
				<code> 
<pre>
	for(var i=0;i<2;i++){
		setTimeout(function(){
			console.log(i)
		},0)
	}
</pre>
				</code>
				<p>
					<em style="color: red;">setTimeout()是异步函数，等同步任务执行完再去执行异步</em><br>
					以上代码依次输出的是: 2, 2。
				</p>
			</div>
			<div id="tiankong_3">
				<h3>3.</h3>
				<code> 
<pre>
	setTimeout(function(){
	  console.log("time_a");
	},0)
	
	for(var j=0;j<5;j++ ){
		console.log(j);
	}

	setTimeout(function(){
	  console.log("time_b");
	},0)

	function waitForMe(){
		var now = (new Date()).getTime();
		while((new Date()).getTime() - now < 5000){};
		console.log("finish");
	}

	waitForMe();
</pre>
					
				</code>
				<p>
					<em style="color: red;">setTimeout()是异步函数，等同步任务执行完再去执行异步</em><br>
					以上代码依次输出的是: 0, 1, 2, 3, 4, "finish", "time_a", "time_b"。
				</p>
			</div>
			
			</div>
			<div id="tiankong_4">
				<h3>4.null 和 undefined 的区别：</h3>
				<p>
					相同之处: 在语义上都表示为'空', 并且转换成布尔值都为false <br/>
					不同之处: undefined一般是声明一个变量，但为对其进行赋值，那么系统默认该对象的值为'undefined';<br/>
					而null一般是开发者赋值给某一个变量，常用于告诉浏览器这个变量不再使用，可以回收。
				</p>
			</div>
			<div id="tiankong_5">
				<h3>5.('div .ab')与('.ab div')哪个效率更高？</h3>
				<p>
					('div .ab') 查找效率更高。<br/>
					因为查询的规则是从右往左，即 ('div .ab')先找到.ab，然后在此基础上找div，<br/>
					而('.ab div')先找到div，在此基础上再找.ab 显然后者更加耗时，一般情况下。
				</p>
			</div>
		</div>
		
		<div id="jianda">
			<h1>简答题</h1>
			<div id="jianda_1">
				<h3>1.JavaScript的基本数据类型</h3>
				<p>
					基本数据类型: Number(整型)、String(字符串)、Boolean(布尔类型)、Undefined、Null、Object(对象)
				</p>
			</div>
			<div id="jianda_2">
				<h3>2.请用JavaScript的时间对象获取当前年、月、日，要求格式如下：1970-00-01</h3>
				<code>
<pre>
	var nowDate = new Date();
	var nowYear = nowDate.getFullYear();
	//从0开始
	var nowMonth = nowDate.getMonth();
	var nowDate = nowDate.getDate();
	nowDate = nowYear+ '-' + nowMonth + '-' +nowDate;
	//nowDate = new Date(nowYear+ '-' + nowMonth + '-' +nowDate);
</pre>
				</code>
			</div>
			<div id="jianda_3">
				<h3>3.onload()函数和jQuery的document.ready()有什么区别？</h3>
				<p>
					1.onload()>>>是js提供的事件，表示当页面渲染完毕后执行回调，而页面渲染<br/>
					包括DOM结构渲染、CSS样式、外部资源加载等。<br/>
					2.jQuery的document.ready()>>>是jQuery提供的事件，表示当DOM结构渲染完毕后执行回调<br/>
					, DOM渲染指HTML结构渲染，这个执行回调的时间要比onload()方法要早，不需要等待外部资源加载和css样式渲染<br/>
				</p>
			</div>
			
			<div id="jianda_4">
				<h3>4.DOM操作————如何添加、移除、复制、创建和查找节点</h3>
				<p>
<pre>
	1.查找节点: 
		getElementById()--通过ID获取节点;
		getElementsByTagName()--通过标签名获取节点，返回一个列表;
		getElementsByName()--通过name属性获取节点，返回一个列表;
		getElementsByClassName()--通过class属性获取节点，返回一个列表;
	2.创建节点:
		createElement()--参数是HTML字符串
	3.添加节点:
		appendChild()--在队尾添加一个子元素，参数是需要新增的子元素
		insertBefore()--在指定子元素之前插入新增的子元素，参数1.新增元素，参数2.新增元素
		innerHTML属性--赋值HTML字符串，插入到指定元素中，作为其子元素
		innerText属性--添加文本节点<span style="color: red;">innerHTML不是添加而是替换，并且替换会整个替换连同绑定的事件</span>
		outerHTML属性--赋值HTML字符串，但是会将指定的元素也覆盖掉。
	4.移除节点:
		removeChild() -- 移除指定的子元素
		remove() -- 移除本身元素
		replaceChild()-- 替换子节点，参数1.null,参数2.要删除的子节点
	5.复制
		clone()-- 复制节点，可传入一个布尔值作为参数，true表示深拷贝，即连同其子元素也一同拷贝
</pre>
				</p>
				
			</div>
			<div id="jianda_5">
				<h3>5.ajax是什么？ajax的过程？</h3>
				<p>
					ajax是一种异步请求(局部刷新)的技术，在js中可通过创建一个xhr对象，然后进行一系列的操作来实现。<br/>
					ajax的过程，分四步：1.创建xhr对象。2.建立请求链接。3.监听onReadyChange事件。4.发送请求。
				</p>
			</div>
			<div id="jianda_6">
				<h3>6.什么是跨域，如何处理？</h3>
				<p>
					跨域是指要请求资源链接的域名与发送请求链接的域名有任意一处不相同，受浏览器的'同源策略'限制。<br/>
					处理方法: <br/> 
						1. jsonp--利用script标签不受同源策略影响,但是只能使用get方法发送请求. <br/>
						2. CORS--请求的后台允许访问, 即CORS允许头(Access-Control-Allow-Origin:'*')或者指定域名
						3. Ngxin--反向代理，即通过自家后台向别人家后台请求资源，因为同源策略只限制浏览器。
				</p>
			</div>
			<div id="jianda_7">
				<h3>7.storage和cookie的区别。</h3>
				<p>
					storage分localStorage和sessionStorage，前者是本地存储，永久保存(只要你不手动清除)，上限是<br/>
					5MB，后者是会话存储，只要不把关联页面全部关闭，数据就不会消失。<br/>
					cookie只是临时性存储，受设置的时间限制，并且最大能存储4KB，而且不同的浏览器存储的大小不一，
					数量也受限制。<br/>
					总体来说，storage比cookie的存储容量要大，而且不受时间影响，存储的时间会久一些。
				</p>
			</div>
			<div id="jianda_8">
				<h3>8.eval的理解</h3>
				<p>
					个人认为eval类似一个翻版的js解析器，可通过传入一个js字符来执行字符串代码，<br/>
					并且eval能动态延长作用域链（即执行的时候新增动态作用域以延长当前作用域链）。
				</p>
			</div>
			<div id="jianda_9">
				<h3>9.什么是事件流？事件冒泡？事件捕获？事件委托？</h3>
				<p>
					事件流: 包含事件捕获和事件冒泡，表明事件机制通过流的形式进行捕获和冒泡，即从window对象开始，根据DOM树逐层传递。<br/>
					事件冒泡: 从目标元素(触发事件的元素)开始，向上冒泡，直到全局对象为止。<br/>
					事件捕获: 从全局对象开始往下捕获，直到找到目标元素(触发事件的元素)为止。<br/>
					事件委托: 通过事件冒泡的原理，在要监听的一系列子元素的父元素上设置监听事件<br/>
				</p>
			</div>
			<div id="jianda_10">
				<h3>10.如何优化页面性能</h3>
				<p>
					1.压缩css/js代码
					2.分批预加载加载或懒加载资源
					3.标签语义化
					4.小图片可以使用base64 或者 合成雪碧图，减少资源请求次数
					5.加载资源的标签要分布合理，譬如将js放在body内部的最后面
					6.减少ajax请求
					7.使用事件委托减少监听事件
					8.减少DOM操作（影响页面结构的操作放在一个变量中存储）、减少遍历
					9.使用CDN
					10.分包加载
				</p>
			</div>
		</div>
	</body>
</html>
